<template>
    <section class="area_detail">
 		 <div class="basc_info">
 		 	<p class="basc_info_p">基本信息</p>
 		 	<p>
 		 		<span class="basc_info_span_title">区域名称 <span class="basc_info_span_detail">{{bascInfo.name}}</span></span>    
 		 		<span  class="basc_info_span_title">所属网段 <span class="basc_info_span_detail">{{bascInfo.segmentName}}</span></span>    
 		 	</p>
 		 	<p>
 		 		<span class="basc_info_span_title">区域标识 <span class="basc_info_span_detail">{{bascInfo.nodeSn}}</span></span>    
 		 		<span  class="basc_info_span_title">连通情况 <span class="basc_info_span_detail">{{bascInfo.status==='0'?'异常':'正常'}}</span></span>    
 		 	</p>
 		 	<p>
 		 		<span class="basc_info_span_title">内存总量
	 		 		<span class="basc_info_span_title_all special_title_all">
	 		 			<!--<span class="basc_info_span_title_num" :style="{width:bascInfo.neiCun.num}">{{bascInfo.memory}}</span>-->
	 		 			{{bascInfo.memory}}G
	 		 		</span>
 		 		</span>
 		 	</p>
 		 	<p>
 		 		<span class="basc_info_span_title">磁盘大小
	 		 		<span  class="basc_info_span_title_all special_title_all">
	 		 			<!--<span class="basc_info_span_title_num" :style="{width:bascInfo.neiCun.num}">{{bascInfo.diskSize}}</span>-->
	 		 			{{bascInfo.desk}}G
	 		 		</span>
 		 		</span>
 		 	</p>
 		 	<p>
 		 		<span class="basc_info_span_title">CPU大小
	 		 		<span   class="basc_info_span_title_all special_title_all">
	 		 			<!--<span class="basc_info_span_title_num" :style="{width:bascInfo.neiCun.num}">{{bascInfo.cpu.num}}</span>-->
	 		 			{{bascInfo.cpuNum}}核
	 		 		</span>
 		 		</span>
 		 	</p>
 		 	
 		 		<el-carousel  height="160px" :autoplay=false  trigger="click" indicator-position="none" style="width: 95%;margin: 30px auto;">
								    <el-carousel-item v-for="(item,index) in 4" :key="index">
										<el-row :gutter="20">
											 <el-col :span="4"  v-for="(serverInfoItem,serverIndex) in serverInfo">
											 	<div  class="toupu_item"  @click="chooseServer">
											 		<p class="item_name">{{serverInfoItem.name}}</p>
												 	<P><span class="toupu_item_title">CPU:</span>{{serverInfoItem.cpu.all}}&nbsp;&nbsp;剩余 {{serverInfoItem.cpu.num}}</P>
												 	<P><span class="toupu_item_title"> 内存:</span>{{serverInfoItem.memory.all}}剩余 {{serverInfoItem.memory.num}}</P>
												 	<P><span class="toupu_item_title">共享服务:</span><span class="blur_span">{{serverInfoItem.shareServer.all}}</span></P>
											 	</div>
											 	
											  </el-col>
										</el-row>
								    </el-carousel-item>
					</el-carousel>
 		 </div>
 		 
 		 
 		 <!--通道信息-->
 		 <div class="tongdaoInfo">
 		 		<p class="basc_info_p">通道信息</p>
			  	<div class="tongDaoInfo_item" v-for="(item,index) in tongDaoInfo">
			  		<p class="tongDaoInfo_item_p">{{item.name}}</p>
			  		<ul>
			  			<!--<li v-for="(tongDaoInfoItem,tongDaoInfoIndex) in item.detail"  style="padding: 0 15px;">
			  				<span class="tongDaoInfoItem_title">
			  					{{tongDaoInfoItem.name}}
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1" v-if="tongDaoInfoItem.type==='1'">
			  					{{tongDaoInfoItem.val}}
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type2" v-if="tongDaoInfoItem.type==='2'">
			  					{{tongDaoInfoItem.val}}
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type3" v-if="tongDaoInfoItem.type==='3'">
			  					{{tongDaoInfoItem.val}}
			  				</span>
			  			</li>
			  			-->
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					类型
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1">
			  					{{item.type===1?'实时接口':'FTP通道'}}
			  				</span>
			  			</li>
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					负载策略
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1">
			  					{{detailWeight[item.weight]}}
			  				</span>
			  			</li>
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					A端区域
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1">
			  					{{item.aaAreaName}}
			  				</span>
			  			</li>
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					B端区域
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1">
			  					{{item.bbAreaName}}
			  				</span>
			  			</li>
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					带宽
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type1">
			  					没有
			  				</span>
			  			</li>
			  			<li class="pading_15">
			  				<span class="tongDaoInfoItem_title">
			  					连通情况
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type3" v-if="item.status===0">
			  					禁用
			  				</span>
			  				<span class="tongDaoInfoItem_val tongDaoInfoItem_type2" v-if="item.status===1">
			  					启用
			  				</span>
			  			</li>
			  		</ul>
			  	</div>
 		 </div>
 		 
 		 <!--服务信息-->
 		 <div class="server_info">
 		 		<p class="basc_info_p">服务信息</p>
 		 		
 		 		<el-tabs type="border-card">
				  <el-tab-pane label="共享服务">
				  	<div class="">
						<p>
							<span class="serverInfoTitle_span"v-for="(item,index) in serverInfoTitle" :class="{'active': index===serverInfoTitleActive}" @click="changeInfoActive(item,index)">
								{{item.name}}({{item.count}})
							</span>
						</p>
						<div class="server_info_item" @click="pushServer(item)" v-for="(item,index) in serverInfoItem">
							<p class="server_info_item_title">{{item.name}}</p>
							<p><span class="server_info_span">类型:&nbsp;&nbsp;</span>{{item.serviceType=='1'?'共享':'采集'}}</p>
							<p><span class="server_info_span">服务方:&nbsp;&nbsp;</span>{{item.prodecerName}}</p>
							<p><span class="server_info_span ">状态:&nbsp;&nbsp;</span>
								<span class="server_info_span1" v-if="item.status===1">正常</span>
								<span class="server_info_span2" v-if="item.status===0">异常</span>
							</p>
						</div>
					</div>
				  </el-tab-pane>
				  <el-tab-pane label="采集服务">
				  	
				  </el-tab-pane>
				</el-tabs>
 		 		
 		 		
				
 		 </div>
        
    </section>
</template>

<script>
    import {
    	computedGetAreaDetail,
    	computedGetAreaDetailServerItem,
    	computedGetAreaDetailServerItemInfo
    } from "../css_js_img/computedareaResource"
    
    export default {
    	props:{
    		detailId:'',
    	},
        data() {
          return {	
          			detailWeight:["",'随机方式',"轮询方式","权重策略"],
          			serverInfoTitleActive:1,
          			bascInfo:{},
          			tongDaoInfo:[],
          			serverInfoItem:[],
          			serverInfo:[
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				},
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				},
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				},
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				},
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				},
          				{
          					name:"Deskey1",
          					cpu:{
          						all:'4核',
          						num:'10%',
          					},
          					memory:{
          						all:'20G',
          						num:'30%',
          					},
          					shareServer:{
          						all:'30个'
          					}
          				}
          			],
          			serverInfoTitle:[
          				{
          					id:1,
          					name:'全部',
          					num:'12'
          				},
          				{
          					id:2,
          					name:'经侦',
          					num:'2'
          				},
          				{
          					name:'情报',
          					num:'8'
          				},
          				{
          					name:'国保',
          					num:'2'
          				}
          			],
          };
        },
        methods: {
        		chooseServer(){/*选中这个服务信息*/
        			
        		},
        		changeInfoActive(item,index){
        			this.serverInfoTitleActive = index;
        			computedGetAreaDetailServerItemInfo(this,item.id);
        		},
        		pushServer(item){/*打开共享服务或者采集服务*/
        			console.log(item);
        			let diyTitle = '服务类型出错';
        			if(item.serviceType==1){
        				diyTitle='共享服务档案';
        			}
        			if(item.serviceType==2){
        				diyTitle='采集服务档案';
        			}
//      			item.serviceType===1?'共享服务档案':'采集服务档案';
        			this.$emit("addTab",{title:diyTitle,id:item.nodePublicServiceId,type:"dangan"})
        		}
        	
        },
        mounted(){
        	computedGetAreaDetail(this);
        	computedGetAreaDetailServerItem(this);
        },
        watch:{
        	detailId(newVal){
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/
        		computedGetAreaDetail(this);
        		computedGetAreaDetailServerItem(this);
        	}
        }
  };
</script>

<style scoped="scoped">
	
	li{
		list-style: none;
	}
	.server_info_span1{
		color: #008855 !important;
	}
	.server_info_span2{
		color: orangered !important;
	}
	span.server_info_span {
    	font-size: 14px;
    	    color: gray;
	}
	p.server_info_item_title {
		
		color: #2576C5;
	    text-align: center;
	    font-size: 16px;
	    margin: 15px;
	}
	.server_info_item p{
		padding: 0 15px;
		word-wrap: break-word;
		    margin: 10px 0;
		    font-size: 14px;
	}
	.server_info_item{
		cursor: pointer;
		width: 215px;
		min-height: 140px;
		background: #f5f5f5;
		border-radius: 4px;
		display: inline-block;
		vertical-align: text-top;
   	 	margin: 15px 10px;
	}
	span.serverInfoTitle_span.active {
		color: #2276D2;
	}
	span.serverInfoTitle_span {
	    margin: 0 10px;
	    font-size: 14px;
	    cursor: pointer;
	}
	.server_detail{
		background: #E6E6E6;
		padding: 15px;
	}
	.toupu_item p{
		margin: 10px 0;
	}
	span.toupu_item_title {
	    color: #969393;
	}
	.toupu_item {
	    border: solid 1px #F0F0F0;
	    padding: 0 10px;
	    border-radius: 10px;
	    min-height: 145px;
	    font-size: 13px;
	    cursor: pointer;
	    vertical-align: top;
	}
	p.item_name {
	    text-align: center;
	    margin: 15px;
	    font-size: 16px;
	    color: #2576c5;
	}
	.server_info{
	    background: #fff;
	    margin-top: 15px;
	    padding: 10px 20px;
	}
	/**************************/
	span.tongDaoInfoItem_val.tongDaoInfoItem_type3{
	    font-size: 16px;
	     color: orangered;
	}
	span.tongDaoInfoItem_val.tongDaoInfoItem_type2 {
	    font-size: 16px;
	     color: green;
	}
	span.tongDaoInfoItem_val.tongDaoInfoItem_type1 {
	    font-size: 16px;
	    color: #333333;
	}
	span.tongDaoInfoItem_title {
	    font-size: 16px;
	    color: #787878;
	    margin: 2px 0;
	    display: inline-block;
	}
	p.tongDaoInfo_item_p {
	    text-align: center;
	    margin: 15px;
	    font-size: 16px;
	    color: #3e81c9;
	}
	.tongDaoInfo_item{
		width: 224px;
		min-height: 224px;
		background: #f5f5f5;
		margin: 30px 20px;
		border-radius: 5px;
		display: inline-block;
		vertical-align: top;
	}
	.tongdaoInfo{
	    background: #fff;
	    margin-top: 15px;
	    padding: 10px 20px;
	}
	/*基本信息*/
    .basc_info{
    	/*height: 300px;*/
	    background: #fff;
	    /*margin-top: 15px;*/
	    padding: 10px 20px;
	   
    }
    p.basc_info_p {
	    font-size: 20px;
	    font-weight: 600;
	     margin-bottom: 25px;
	}
	span.basc_info_span_title {
	    display: inline-block;
	    width: 500px;
	    font-size: 16px;
	        color: #787878;
	    margin: 10px 0;
	}
	span.basc_info_span_detail {
	    color: #333333;
	        padding-left: 40px;
	}
	span.basc_info_span_title_all {
		display: inline-block;
	    width: 380px;
	    background:#BDBDBD;
	    border-radius: 50px;
	    position: relative;
	}
	span.basc_info_span_title_num {
    display: inline-block;
    text-align: right;
    background: #2576C5;
    border-radius: 50px;
    padding-right: 10px;
    color: #fff;
    position: absolute;
    left: 0;
	}
	.special_title_all{
		text-align: right;
		    padding-right: 10px;
		   margin-left: 40px;
	}
	.pading_15{
		padding: 0 15px;
	}
	.area_detail{
		border-top: solid 15px #F0F0F0;
		background: #F0F0F0;
	}
</style>